#app{
  height: 100vh;
}

.nav{
  display: flex;
  align-items: center;
  position: absolute;
  width: 76px;
  height: 70px;
  padding: 0 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #fff;
  line-height: 70px;
  cursor: pointer;
  transition: width 0.6s linear;
}

.nav.active{
  width: 380px;
}

.active .nav_list{
  width: 100%;
}

.nav_list{
  width: 0px;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: width 0.6s linear;
}
.nav_item{
  font-family: '宋体';
  padding: 0 15px;
  height: 100%;
  font-size: 14px;
  letter-spacing:2px;
  opacity: 0;
  transform: rotateY(0deg);
  transition: transform 0.6s linear, opacity 0.6s linear;
}

.active .nav_item{
  opacity: 1;
  transform: rotateY(360deg);
}

.btn{
  position: relative;
  width: 30px;
  height: 30px;
}

.btn::after,.btn::before{
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #5290f9;
  top: 40%;
  left: 50%;
  transition: transform 0.6s linear;
}

.btn::before{
  transform: translate(-50%,-50%) ;
}

.btn::after{
  top: 70%;
  transform: translate(-50%,-50%);
}

.active .btn::before{
  top: 50%;
  transform: translate(-50%,-50%) rotate(765deg);
}

.active .btn::after{
  top: 50%;
  transform: translate(-50%,-50%) rotate(-765deg);
}


.top{
  background-color: #eafbff;
  height: 50%;
}
.bottom{
  background-color:#5290f9;
  height: 50%;
}